window.onload = function () {
	
	/*
	 *	todolist  有以下几个功能  
	 * 	添加，内容从input框获取   --- 添加给待办事项
	 * 	打勾  ： 待办事项里的框打勾后，转移到已完成时间去
	 * 	删除  ： 点击删除键，将事件删除
	 *  计数功能，计算事件的数量
	 * 
	 * 本地存储功能
	 * 	写个保存函数，每次涉及到tasks的操作后面都加上这函数。函数的思路就是用JSON.stringify将tasks数组转成字符串，然后用localStorage.setItem()保存到本地。
	 *	同样在第10行初始化数据的时候，先从本地内存取出字符串，用JSON.parse()解析成数组再赋值给tasks
	 * 
	 * 
	 * 
	 * 
	 * */
	/*面向对象形式*/
	var that = null;
	var value = '';  //获取输入框内容
	
	/*本地存储*/

	
	
	
	
	
	
	
	
	
	class TodoList {
		constructor () {
			that = this;
			/*获取输入框*/
			this.Input = document.querySelector('#addTxt');
			/*获取待办事项列表*/
			this.todoList = document.querySelector('.todo-list');
			/*已完成事项列表*/
			this.doneList = document.querySelector('.done-list');
			/*待办事项的数量*/
			this.todoNum = document.querySelector('.todo .num');
			/*事项完成的数量*/
			this.doneNum = document.querySelector('.done .num');
			/*初始化*/
			this.init();
			/*开始执行*/
			/*键盘事件*/
			this.Input.onkeyup = this.isEnter;
		}
		
		/*下面这些由于每次都要判断一下，所以写成一个类，初始化函数*/
		init () {
			/*复选框按钮*/
			/*todo里的*/
			this.checkingBox = document.querySelectorAll('.todo-list input');
			/*删除按钮*/
			this.delBtn01 = document.querySelectorAll('.todo-list span');
			/*done里的*/
			this.checkedBox = document.querySelectorAll('.done-list input');
			/*删除按钮*/
			this.delBtn02 = document.querySelectorAll('.done-list span');
			/*给复选框添加事件委托*/
			for (var i=0; i<this.checkingBox.length; i++) {
				/*利用闭包函数写法，省的我另外定义一个index下标*/
				(function (m) {
					/*这里不能用this了，因为闭包函数this是默认指向我们window的*/
					that.checkingBox[m].onclick = that.addToDone;
					/*删除该节点,待办事项里的删除按钮*/
					that.delBtn01[m].onclick = that.delItem01;
					
				})(i)
			}
			/*原理同上*/
			/*由于第二个数量是不同的，所以单独写一个循环*/
			for (var i=0; i<this.delBtn02.length; i++) {
				(function (m) {
					/*删除按钮的*/
					that.delBtn02[m].onclick = that.delItem02;
					/*已完成里面的复选框被点击，回到未完成那里*/
					that.checkedBox[m].onclick = that.addTodoList;
				})(i)
			}
		}
		
		/*输入框键盘事件*/
		isEnter (e) {
			/*获取按下的键的ASCLL码值*/
			var which = e.which || e.keyCode;
			/*每次键盘按下都获取一下输入的次*/
			value = that.Input.value;
			/*如果是enter，就可以添加到待办事项中*/
			/*判断第一个是否是空格，才可以添加*/
			if (which == 13 && value.indexOf(' ') != 0) {
				/*执行添加到待办事项*/
				that.todo();
				/*然后清空输入框的内容*/
				document.querySelector('#addTxt').value = '';
			} else if (which == 13 && value.length == 0) {
				console.log('请输入待办事项');
			}
		}

		/*待办事项*/
		todo () {
			/*创建一个节点*/
			var li = `<li>
						<input type="checkbox" />
						<p>${value}</p>
						<span>-</span>
					 </li>`;
			that.todoList.insertAdjacentHTML('afterbegin',li);
			/*每次执行完，还要重新初始化，检测一下我们的节点数量*/
			that.init();
			/*然后改变事项数量*/
			that.todoNum.innerHTML = `${that.checkingBox.length}`;
		}
		
		/*复选框点击完，就把事项添加到已完成那边去*/
		addToDone (ev) {
			/*设置兼容型*/
			var e = ev || window.event;
			var target = e.target || window.event.srcElement;
			if (target.tagName.toLowerCase() == 'input') {
				/*删除节点*/
				that.edit(target.parentNode);
				/*然后改变事项数量*/
				that.todoNum.innerHTML = `${that.checkingBox.length}`;
				/*将该触发点内容添加到已完成那里去*/
				that.done(target.parentNode.innerHTML);
				/*然后改变事项数量*/
				that.doneNum.innerHTML = `${that.checkedBox.length}`;
			}
		}
		
		/*已完成列表*/
		done (node) {
			/*创建一个节点*/
			var li = `<li>${node}</li>`;
			that.doneList.insertAdjacentHTML('afterbegin',li);
			/*此时的复选框是处于选定状态的*/
			document.querySelector('.done-list input').checked = true;
			/*每次执行完，还要重新初始化，检测一下我们的节点数量*/
			that.init ();
		}
		
		/*点击删除按钮，删除点该父节点， 待办事项里的*/
		delItem01 (ev) {
			var e = ev || window.event;
			var target = e.target || window.event.srcElement;
			/*判断触发点*/
			if (target.tagName.toLowerCase() == 'span') {
				/*删除节点*/
				that.edit(target.parentNode);
				/*重新初始化*/
				that.init();
				/*然后改变事项数量*/
				that.todoNum.innerHTML = `${that.checkingBox.length}`;
				
			}
		}
		
		/*已完成列表里的删除按钮功能*/
		delItem02 (ev) {
			var e = ev || window.event;
			var target = e.target || window.event.srcElement;
			/*判断触发点*/
			if (target.tagName.toLowerCase() == 'span') {
				/*删除节点*/
				that.edit(target.parentNode);
				/*重新初始化*/
				that.init();
				/*然后改变事项数量*/
				that.doneNum.innerHTML = `${that.checkedBox.length}`;
			}
		}
		
		/*已完成列表的复选框，点击就把触发的父节点添加回todolist*/
		addTodoList (ev) {
			/*设置兼容型*/
			var e = ev || window.event;
			var target = e.target || window.event.srcElement;
			if (target.tagName.toLowerCase() == 'input') {
				/*删除节点*/
				that.edit(target.parentNode);
				/*然后改变事项数量*/
				that.doneNum.innerHTML = `${that.checkedBox.length}`;
				/*将该触发点内容添加到已完成那里去*/
				that.todo(target.parentNode.innerHTML);
				/*重新改变未完成列表的数值*/
				that.todoNum.innerHTML = `${that.checkingBox.length}`;
			} else {
				alert(1)
			}
		}
		
		
		
		/*edit是一个对象，专门删除我们事项的*/
		edit (node) {
			/*从列表删除li节点*/
			node.parentNode.removeChild(node);
			/*然后重新初始化*/
			that.init ();
		}
		
		/*本地存储*/
		
		
		
		
	}
/*初始化*/
new TodoList ();
}
